<template>
  <div>
    <div class="handle-box" style="margin: 20px 0">
      <el-input v-model="userName" placeholder="用户名称" style="width: 200px;margin: 0 20px"></el-input>
      <el-button type="primary" v-on:click="info()" style="margin-right: 30px"><el-icon class="el-icon--left"><Search /></el-icon>查询</el-button>
      <el-button type="primary" v-on:click="goAdd()"><el-icon class="el-icon--left"><CirclePlusFilled /></el-icon>添加新用户</el-button>
    </div>

    <el-table :data="tableData" border stripe header-cell-class-name="table-header">
      <el-table-column prop="userName" label="用户名"></el-table-column>
      <el-table-column prop="password" label="密码"></el-table-column>
      <el-table-column prop="realName" label="真实姓名"></el-table-column>
      <el-table-column label="操作">
        <template #default="scope">
          <el-button type="primary" @click="deleteById(scope.row.id)"><el-icon class="el-icon--left"><Delete /></el-icon>删除用户</el-button>
          <el-button type="primary" @click="goUpdate(scope.row.id)"><el-icon class="el-icon--left"><Edit /></el-icon>修改权限</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!--添加新用户-->
    <el-dialog v-model="dialogVisibleAdd" title="添加用户信息" width="50%">
      <div>
        <span style="margin-right: 20px;margin-left: 100px">用户名</span>
        <el-input v-model="userNameAdd" style="width: 150px"></el-input>
        <span style="margin-right: 20px;margin-left: 30px">真实姓名</span>
        <el-input v-model="realNameAdd" style="width: 150px"></el-input>
      </div>
      <div style="margin-left: 100px;margin-top: 100px">
        <p style="margin-left: 100px"></p><span>拥有角色</span>
        <el-checkbox-group v-model="roleList" style="margin-top: 20px" @change="selectRolePer()">
          <el-checkbox v-for="role in roleArray" :key="role.id" :label="role.id">
            {{ role.roleName }}
          </el-checkbox>
        </el-checkbox-group>
      </div>
      <div style="margin-left: 100px;margin-top: 100px">
        拥有权限:
        <span v-for="p in permissionsArray">{{ p }},</span>
      </div>
      <template #footer>
        <span class="dialog-footer">
          <el-button type="primary" @click="cancel()">取消</el-button>
          <el-button type="primary" @click="add()">添加</el-button>
        </span>
      </template>
    </el-dialog>

    <!--修改权限-->
    <el-dialog v-model="dialogVisibleUpdate" title="修改用户权限" width="50%">
      <div>
        <span style="margin-right: 20px;margin-left: 100px">用户名</span>
        {{ userNameUpdate }}
        <span style="margin-right: 20px;margin-left: 30px">真实姓名</span>
        {{ realNameUpdate }}
      </div>
      <div style="margin-left: 100px;margin-top: 100px">
        <p style="margin-left: 100px"></p><span>当前角色</span>
        <el-checkbox-group v-model="roleListUpdate" style="margin-top: 20px" @change="selectRolePerUpdate()">
          <el-checkbox v-for="role in roleArrayUpdate" :key="role.id" :label="role.id">
            {{ role.roleName }}
          </el-checkbox>
        </el-checkbox-group>
      </div>
      <div style="margin-left: 100px;margin-top: 100px">
        拥有权限:
        <span v-for="p in permissionsArrayUpdate">{{ p }},</span>
      </div>
      <template #footer>
        <span class="dialog-footer">
          <el-button type="primary" @click="update()">修改</el-button>
        </span>
      </template>
    </el-dialog>

    <!--分页-->
    <el-pagination style="width:400px;margin: 30px auto" v-model:page-size="pageSize" v-model:current-page="curPage"
                   :total="total" background @current-change="info"></el-pagination>
  </div>
</template>

<script>
import axios from "axios";
import {ElMessage} from "element-plus";

export default {
  name: "user",
  created() {
    this.info()
  },
  data() {
    return {
      tableData: [],
      pageSize: 4,
      curPage: 1,
      total: 0,
      userName: '',

      dialogVisibleAdd: false,
      userNameAdd: '',
      realNameAdd: '',
      roleList: [],
      roleArray: [],
      permissionsArray: [],

      dialogVisibleUpdate: false,
      userNameUpdate: '',
      realNameUpdate: '',
      roleListUpdate: [],
      roleArrayUpdate: [],
      permissionsArrayUpdate: [],
      updateId:0,
    }
  },
  methods: {
    info() {
      let param = {
        "curPage": this.curPage,
        "pageSize": this.pageSize,
        data: {"userName": this.userName}
      }
      let config = {
        headers: {
          'Content-Type': 'application/json'
        }
      }
      axios.post('/api/user/info', param, config).then(response => {
        this.tableData = response.data.records
        this.total = response.data.total
      })
    },
    goAdd() {
      this.dialogVisibleAdd = true
      axios.post('/api/role/selectList', null).then(response => {
        this.roleArray = response.data
      })
    },
    add() {
      let param = new URLSearchParams();
      param.append("userName", this.userNameAdd)
      param.append("realName", this.realNameAdd)
      param.append("roleIds", this.roleList)
      axios.post('/api/user/add', param).then(response => {
        if (response.data.code == "000000"){
          this.dialogVisibleAdd = false
          this.userNameAdd = ''
          this.realNameAdd = ''
          this.roleList = []
          this.permissionsArray = []
          this.info()
          ElMessage.success('添加成功');
        }else {
          ElMessage.error('添加失败');
        }
      })
    },
    selectRolePer() {
      axios.post('/api/role/selectRolePer', this.roleList).then(response => {
        this.permissionsArray = response.data
      })
    },
    cancel() {
      this.dialogVisibleAdd = false
      this.roleList = []
      this.userNameAdd = ''
      this.realNameAdd = ''
      this.permissionsArray = []
    },
    deleteById(id) {
      let param = new URLSearchParams();
      param.append("id", id)
      axios.post('/api/user/delete', param).then(response => {
        if (response.data.code == "000000"){
          this.info()
          ElMessage.success('删除成功');
        }else {
          ElMessage.error('删除失败');
        }
      })
    },
    goUpdate(id) {
      this.dialogVisibleUpdate = true
      this.updateId = id
      axios.get('/api/user/selectOne?id=' + id, null).then(response => {
        this.userNameUpdate = response.data.userName
        this.realNameUpdate = response.data.realName
      })
      axios.post('/api/role/selectList', null).then(response => {
        this.roleArrayUpdate = response.data
      })
      axios.get('/api/role/selectUserRoleNow?id=' + id, null).then(response => {
        this.roleListUpdate = response.data
        this.selectRolePerUpdate()
      })
    },
    selectRolePerUpdate(){
      axios.post('/api/role/selectRolePer', this.roleListUpdate).then(response => {
        this.permissionsArrayUpdate = response.data
      })
    },
    update(){
      let param = new URLSearchParams();
      param.append("roleIds",this.roleListUpdate)
      param.append("userId",this.updateId)
      axios.post('/api/user/update',param).then(response=>{
        if (response.data.code == "000000"){
          this.dialogVisibleUpdate = false
          ElMessage.success('修改成功');
        }else {
          ElMessage.error('修改失败');
        }
      })
    },
  }
}
</script>

<style scoped>

</style>